@model WalkingTec.Mvvm.Doc.FrameworkUserVms.FrameworkAllVM
<wt:quote>
    <p>WTM framework uses TagHelpers to provide front-end controls. Currently WTM supports LayUI, more will be added later.</p>
    <p>WTM does not depend on LayUI. Developers can use HTML to write pages. The controls provided by the WTM only simplify writing and improve development speed.</p>
    <p>Controls that starts with ‘wt:’ are provided by the WTM.</p>
</wt:quote>

<wt:fieldset field-set-style="Simple" title="form">
    <p>Forms and their internal controls are most used in development. TagHelpers provided by the WTM can be used to quickly build a form.</p>
    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="Effect" />
            <wt:tabheader title="Code" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent>
                <wt:form vm="@Model.Vm" style="max-width:600px">
                    <wt:textbox field="Vm.Entity.LoginName" />
                    <wt:textbox field="Vm.Entity.Password" is-password="true" />
                    <wt:textbox field="Vm.Entity.Name" />
                    <wt:upload field="Vm.Entity.PhotoId" />
                    <wt:checkbox field="Vm.SelectedSchools" items="Vm.AllSchools" />
                    <wt:combobox field="Vm.Entity.Sex" />
                    <wt:textbox field="Vm.Entity.CellPhone" />
                    <wt:textbox field="Vm.Entity.Email" />
                    <wt:textbox field="Vm.Entity.ZipCode" />
                    <wt:textbox field="Vm.Entity.Address" />
                    <wt:row align="AlignEnum.Right">
                        <wt:submitbutton disabled="true"/>
                        <wt:closebutton  disabled="true"/>
                    </wt:row>
                </wt:form>
            </wt:tabcontent>
            <wt:tabcontent>
            <wt:code>
&ltwt:form vm="@Model.Vm"&gt
    &ltwt:textbox field="Vm.Entity.LoginName" /&gt
    &ltwt:textbox field="Vm.Entity.Password" is-password="true" /&gt
    &ltwt:textbox field="Vm.Entity.Name" /&gt
    &ltwt:upload field="Vm.Entity.PhotoId" /&gt
    &ltwt:checkbox field="Vm.SelectedSchools" items="Vm.AllSchools" /&gt
    &ltwt:combobox field="Vm.Entity.Sex" /&gt
    &ltwt:textbox field="Vm.Entity.CellPhone" /&gt
    &ltwt:textbox field="Vm.Entity.Email" /&gt
    &ltwt:textbox field="Vm.Entity.ZipCode" /&gt
    &ltwt:textbox field="Vm.Entity.Address" /&gt
    &ltwt:row align="AlignEnum.Right"&gt
        &ltwt:submitbutton theme=" ButtonThemeEnum.Disabled" /&gt
        &ltwt:closebutton /&gt
    &lt/wt:row&gt
&lt/wt:form&gt

            </wt:code>
                </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>
</wt:fieldset>


<wt:fieldset field-set-style="Simple" title="list">
 </wt:fieldset>
   <p>Use grid controls provided by WTM to output list quickly</p>
    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="Effect" />
            <wt:tabheader title="Code" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent>
                <wt:searchpanel vm="@Model.ListVm" reset-btn="true">
                    <wt:row items-per-row="ItemsPerRowEnum.Three">
                        <wt:textbox field="ListVm.Searcher.LoginName" />
                        <wt:textbox field="ListVm.Searcher.Name" />
                        <wt:combobox field="ListVm.Searcher.IsValid" empty-text="All" />
                    </wt:row>
                </wt:searchpanel>
                <wt:grid vm="@Model.ListVm" use-local-data="true" height="300"/>
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
&ltwt:searchpanel vm="@@Model.ListVm" reset-btn="true"&gt
    &ltwt:row items-per-row="ItemsPerRowEnum.Three"&gt
        &ltwt:textbox field="ListVm.Searcher.LoginName" /&gt
        &ltwt:textbox field="ListVm.Searcher.Name" /&gt
        &ltwt:combobox field="ListVm.Searcher.IsValid" empty-text="All" /&gt
    &lt/wt:row&gt
&lt/wt:searchpanel&gt
&ltwt:grid vm="@@Model.ListVm" height="300" /&gt
                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>

<wt:fieldset field-set-style="Simple" title="layout">
    <p>Use the panel, tab, row and other controls provided by the WTM to create page layout</p>
    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="Effect" />
            <wt:tabheader title="Code" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent>
                <wt:form vm="@Model.Vm" >
                    <wt:tab>
                        <wt:tabheaders>
                            <wt:tabheader title="Basic" />
                            <wt:tabheader title="Extra" />
                        </wt:tabheaders>
                        <wt:tabcontents>
                            <wt:tabcontent>
                                <wt:row items-per-row="ItemsPerRowEnum.Two">
                                    <wt:textbox field="Vm.Entity.LoginName" />
                                    <wt:textbox field="Vm.Entity.Password" is-password="true" />
                                </wt:row>
                                <wt:row items-per-row="ItemsPerRowEnum.Two">
                                    <wt:textbox field="Vm.Entity.Name" />
                                    <wt:upload field="Vm.Entity.PhotoId" />
                                </wt:row>
                                <wt:checkbox field="Vm.SelectedSchools" items="Vm.AllSchools" />
                            </wt:tabcontent>
                            <wt:tabcontent>
                                <wt:row items-per-row="ItemsPerRowEnum.Two">
                                    <wt:combobox field="Vm.Entity.Sex" />
                                </wt:row>
                                <wt:row items-per-row="ItemsPerRowEnum.Two">
                                    <wt:textbox field="Vm.Entity.CellPhone" />
                                </wt:row>
                                <wt:row items-per-row="ItemsPerRowEnum.Two">
                                    <wt:textbox field="Vm.Entity.Email" />
                                    <wt:textbox field="Vm.Entity.ZipCode" />
                                </wt:row>
                                <wt:textbox field="Vm.Entity.Address" />
                            </wt:tabcontent>
                        </wt:tabcontents>
                    </wt:tab>
                    <wt:row align="AlignEnum.Right">

                        <wt:submitbutton disabled="true"/>
                        <wt:closebutton disabled="true"/>
                    </wt:row>
                </wt:form>
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
&ltwt:form vm="@@Model.Vm"&gt
    &ltwt:tab&gt
        &ltwt:tabheaders&gt
            &ltwt:tabheader title="Basic" /&gt
            &ltwt:tabheader title="Extra" /&gt
        &lt/wt:tabheaders&gt
        &ltwt:tabcontents&gt
            &ltwt:tabcontent&gt
                &ltwt:row items-per-row="ItemsPerRowEnum.Two"&gt
                    &ltwt:textbox field="Vm.Entity.LoginName" /&gt
                    &ltwt:textbox field="Vm.Entity.Password" is-password="true" /&gt
                &lt/wt:row&gt
                &ltwt:row items-per-row="ItemsPerRowEnum.Two"&gt
                    &ltwt:textbox field="Vm.Entity.Name" /&gt
                    &ltwt:upload field="Vm.Entity.PhotoId" /&gt
                &lt/wt:row&gt
                &ltwt:checkbox field="Vm.SelectedSchools" items="Vm.AllSchools" /&gt
            &lt/wt:tabcontent&gt
            &ltwt:tabcontent&gt
                &ltwt:row items-per-row="ItemsPerRowEnum.Two"&gt
                    &ltwt:combobox field="Vm.Entity.Sex" /&gt
                &lt/wt:row&gt
                &ltwt:row items-per-row="ItemsPerRowEnum.Two"&gt
                    &ltwt:textbox field="Vm.Entity.CellPhone" /&gt
                &lt/wt:row&gt
                &ltwt:row items-per-row="ItemsPerRowEnum.Two"&gt
                    &ltwt:textbox field="Vm.Entity.Email" /&gt
                    &ltwt:textbox field="Vm.Entity.ZipCode" /&gt
                &lt/wt:row&gt
                &ltwt:textbox field="Vm.Entity.Address" /&gt
            &lt/wt:tabcontent&gt
        &lt/wt:tabcontents&gt
    &lt/wt:tab&gt
    &ltwt:row align="AlignEnum.Right"&gt
        &ltwt:submitbutton disabled="true" /&gt
        &ltwt:closebutton disabled="true" /&gt
    &lt/wt:row&gt
&lt/wt:form&gt
                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>
</wt:fieldset>
    <script>
    layui.use('code',function(){layui.code({ about: false })})
    </script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
